<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>支付成功 - 跨境进口电商</title>
    <link href="https://cdn.staticfile.org/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <link href="https://cdn.staticfile.org/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <style>
        body {
            font-family: Tahoma,Arial,Roboto,"Droid Sans","Helvetica Neue","Droid Sans Fallback","Heiti SC","Hiragino Sans GB",Simsun,sans-self;
        }
        .step-indicator {
            position: relative;
        }
        .step-indicator::after {
            content: '';
            position: absolute;
            top: 20px;
            left: 50%;
            width: 100%;
            height: 2px;
            background: #e5e7eb;
            z-index: -1;
        }
        .step-indicator:last-child::after {
            display: none;
        }
        .step-indicator.completed::after {
            background: #10b981;
        }
        .success-animation {
            animation: successPulse 2s ease-in-out infinite;
        }
        @keyframes successPulse {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.05); }
        }
        .fade-in {
            animation: fadeIn 1s ease-out;
        }
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .dark-mode {
            background-color: #1a1a1a;
            color: #ffffff;
        }
        .dark-mode .bg-white {
            background-color: #2d2d2d;
        }
        .dark-mode .text-gray-900 {
            color: #ffffff;
        }
        .dark-mode .text-gray-600 {
            color: #d1d5db;
        }
        .dark-mode .border-gray-200 {
            border-color: #4b5563;
        }
        .dark-mode .bg-gray-50 {
            background-color: #374151;
        }
        .dark-mode .hover:bg-gray-50:hover {
            background-color: #4b5563;
        }
    </style>
</head>
<body class="bg-gray-50 transition-colors duration-300">
    <!-- 顶部导航栏 -->
    <nav class="bg-white shadow-lg sticky top-0 z-50">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex justify-between items-center h-16">
                <div class="flex items-center">
                    <div class="flex-shrink-0">
                        <h1 class="text-2xl font-bold text-purple-600">全球购直播</h1>
                    </div>
                    <div class="hidden md:block ml-10">
                        <div class="flex items-baseline space-x-4">
                            <a href="../index.html" class="text-gray-900 hover:text-purple-600 px-3 py-2 rounded-md text-sm font-medium">首页</a>
                            <a href="../overseas-live-center.html" class="text-gray-900 hover:text-purple-600 px-3 py-2 rounded-md text-sm font-medium">直播中心</a>
                            <a href="../overseas-shopping.html" class="text-gray-900 hover:text-purple-600 px-3 py-2 rounded-md text-sm font-medium">海外购商城</a>
                            <a href="../shopping-cart/index.html" class="text-gray-900 hover:text-purple-600 px-3 py-2 rounded-md text-sm font-medium">购物车</a>
                        </div>
                    </div>
                </div>
                <div class="flex items-center space-x-4">
                    <!-- 主题切换 -->
                    <button id="theme-toggle" class="text-gray-600 hover:text-purple-600 p-2 rounded-full hover:bg-gray-100">
                        <i class="fas fa-moon text-xl"></i>
                    </button>
                    <!-- 用户头像 -->
                    <div class="relative">
                        <button class="flex items-center space-x-2 text-gray-700 hover:text-purple-600">
                            <img class="h-8 w-8 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="用户头像">
                            <span class="hidden md:block text-sm font-medium">用户</span>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </nav>

    <!-- 主要内容区域 -->
    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        <!-- 步骤指示器 -->
        <div class="mb-8">
            <div class="flex items-center justify-center">
                <div class="step-indicator completed flex flex-col items-center">
                    <div class="w-10 h-10 bg-green-500 rounded-full flex items-center justify-center text-white font-bold">
                        <i class="fas fa-check"></i>
                    </div>
                    <span class="text-sm font-medium text-green-600 mt-2">购物车</span>
                </div>
                <div class="step-indicator completed flex flex-col items-center">
                    <div class="w-10 h-10 bg-green-500 rounded-full flex items-center justify-center text-white font-bold">
                        <i class="fas fa-check"></i>
                    </div>
                    <span class="text-sm font-medium text-green-600 mt-2">确认订单</span>
                </div>
                <div class="step-indicator completed flex flex-col items-center">
                    <div class="w-10 h-10 bg-green-500 rounded-full flex items-center justify-center text-white font-bold">
                        <i class="fas fa-check"></i>
                    </div>
                    <span class="text-sm font-medium text-green-600 mt-2">支付</span>
                </div>
                <div class="step-indicator completed flex flex-col items-center">
                    <div class="w-10 h-10 bg-green-500 rounded-full flex items-center justify-center text-white font-bold success-animation">
                        <i class="fas fa-check"></i>
                    </div>
                    <span class="text-sm font-medium text-green-600 mt-2">完成</span>
                </div>
            </div>
        </div>

        <!-- 成功提示 -->
        <div class="bg-white rounded-lg shadow-lg p-8 text-center fade-in">
            <div class="success-animation w-20 h-20 bg-green-500 rounded-full flex items-center justify-center mx-auto mb-6">
                <i class="fas fa-check text-white text-3xl"></i>
            </div>
            <h1 class="text-3xl font-bold text-gray-900 mb-2">支付成功！</h1>
            <p class="text-gray-600 mb-6">您的订单已成功支付，我们将尽快为您安排发货</p>
            
            <!-- 订单信息 -->
            <div class="bg-gray-50 rounded-lg p-6 mb-6 text-left">
                <h3 class="text-lg font-semibold text-gray-900 mb-4">订单信息</h3>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                        <p class="text-sm text-gray-600">订单编号</p>
                        <p class="font-mono text-sm font-medium text-gray-900">CB20241201123456</p>
                    </div>
                    <div>
                        <p class="text-sm text-gray-600">支付时间</p>
                        <p class="text-sm font-medium text-gray-900">2024年12月1日 14:30:25</p>
                    </div>
                    <div>
                        <p class="text-sm text-gray-600">支付方式</p>
                        <p class="text-sm font-medium text-gray-900">支付宝</p>
                    </div>
                    <div>
                        <p class="text-sm text-gray-600">支付金额</p>
                        <p class="text-sm font-bold text-red-600">¥4,408</p>
                    </div>
                </div>
            </div>
            
            <!-- 操作按钮 -->
            <div class="flex flex-col sm:flex-row space-y-3 sm:space-y-0 sm:space-x-4 justify-center">
                <button onclick="viewOrderDetails()" class="bg-purple-600 text-white px-6 py-3 rounded-lg hover:bg-purple-700 transition-colors font-medium">
                    <i class="fas fa-file-alt mr-2"></i>查看订单详情
                </button>
                <button onclick="continueShopping()" class="border border-purple-600 text-purple-600 px-6 py-3 rounded-lg hover:bg-purple-50 transition-colors font-medium">
                    <i class="fas fa-shopping-bag mr-2"></i>继续购物
                </button>
            </div>
        </div>

        <!-- 订单详情 -->
        <div id="order-details" class="bg-white rounded-lg shadow-lg p-6 mt-8 hidden fade-in">
            <h3 class="text-xl font-bold text-gray-900 mb-6">订单详情</h3>
            
            <!-- 商品列表 -->
            <div class="mb-6">
                <h4 class="text-lg font-semibold text-gray-900 mb-4">商品信息</h4>
                <div class="space-y-4">
                    <div class="flex items-center space-x-4 p-4 bg-gray-50 rounded-lg">
                        <img src="https://images.unsplash.com/photo-1586495777744-4413f21062fa?ixlib=rb-4.0.3&auto=format&fit=crop&w=80&q=80" alt="商品图片" class="w-16 h-16 object-cover rounded-lg">
                        <div class="flex-1">
                            <h5 class="font-semibold text-gray-900">SK-II 神仙水精华液</h5>
                            <p class="text-sm text-gray-600">230ml 日本原装进口</p>
                            <div class="flex items-center space-x-2 mt-1">
                                <span class="text-xs bg-blue-100 text-blue-800 px-2 py-1 rounded">包邮包税</span>
                                <span class="text-xs bg-green-100 text-green-800 px-2 py-1 rounded">现货</span>
                            </div>
                        </div>
                        <div class="text-right">
                            <div class="text-lg font-bold text-red-600">¥1,299</div>
                            <div class="text-sm text-gray-500">数量：1</div>
                        </div>
                    </div>
                    
                    <div class="flex items-center space-x-4 p-4 bg-gray-50 rounded-lg">
                        <img src="https://images.unsplash.com/photo-1572635196237-14b3f281503f?ixlib=rb-4.0.3&auto=format&fit=crop&w=80&q=80" alt="商品图片" class="w-16 h-16 object-cover rounded-lg">
                        <div class="flex-1">
                            <h5 class="font-semibold text-gray-900">资生堂红腰子精华</h5>
                            <p class="text-sm text-gray-600">50ml 抗老修复</p>
                            <div class="flex items-center space-x-2 mt-1">
                                <span class="text-xs bg-blue-100 text-blue-800 px-2 py-1 rounded">包邮包税</span>
                                <span class="text-xs bg-green-100 text-green-800 px-2 py-1 rounded">现货</span>
                            </div>
                        </div>
                        <div class="text-right">
                            <div class="text-lg font-bold text-red-600">¥899</div>
                            <div class="text-sm text-gray-500">数量：1</div>
                        </div>
                    </div>
                    
                    <div class="flex items-center space-x-4 p-4 bg-gray-50 rounded-lg">
                        <img src="https://images.unsplash.com/photo-1556228578-8c89e6adf883?ixlib=rb-4.0.3&auto=format&fit=crop&w=80&q=80" alt="商品图片" class="w-16 h-16 object-cover rounded-lg">
                        <div class="flex-1">
                            <h5 class="font-semibold text-gray-900">CPB钻石精华</h5>
                            <p class="text-sm text-gray-600">30ml 贵妇级护肤</p>
                            <div class="flex items-center space-x-2 mt-1">
                                <span class="text-xs bg-blue-100 text-blue-800 px-2 py-1 rounded">包邮包税</span>
                                <span class="text-xs bg-yellow-100 text-yellow-800 px-2 py-1 rounded">预售</span>
                            </div>
                        </div>
                        <div class="text-right">
                            <div class="text-lg font-bold text-red-600">¥2,599</div>
                            <div class="text-sm text-gray-500">数量：1</div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 收货信息 -->
            <div class="mb-6">
                <h4 class="text-lg font-semibold text-gray-900 mb-4">收货信息</h4>
                <div class="bg-blue-50 border border-blue-200 rounded-lg p-4">
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div>
                            <p class="text-sm text-blue-700">收货人</p>
                            <p class="font-medium text-blue-900">张三</p>
                        </div>
                        <div>
                            <p class="text-sm text-blue-700">手机号</p>
                            <p class="font-medium text-blue-900">138****8888</p>
                        </div>
                        <div class="md:col-span-2">
                            <p class="text-sm text-blue-700">收货地址</p>
                            <p class="font-medium text-blue-900">北京市朝阳区建国门外大街1号</p>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 身份信息 -->
            <div class="mb-6">
                <h4 class="text-lg font-semibold text-gray-900 mb-4">身份信息</h4>
                <div class="bg-yellow-50 border border-yellow-200 rounded-lg p-4">
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div>
                            <p class="text-sm text-yellow-700">真实姓名</p>
                            <p class="font-medium text-yellow-900">张三</p>
                        </div>
                        <div>
                            <p class="text-sm text-yellow-700">身份证号</p>
                            <p class="font-medium text-yellow-900">1101********1234</p>
                        </div>
                    </div>
                    <p class="text-xs text-yellow-600 mt-2">
                        <i class="fas fa-shield-alt mr-1"></i>
                        身份信息仅用于海关清关，已加密存储
                    </p>
                </div>
            </div>
            
            <!-- 费用明细 -->
            <div class="mb-6">
                <h4 class="text-lg font-semibold text-gray-900 mb-4">费用明细</h4>
                <div class="bg-gray-50 rounded-lg p-4 space-y-2">
                    <div class="flex justify-between text-sm">
                        <span class="text-gray-600">商品总价</span>
                        <span class="font-medium">¥4,797</span>
                    </div>
                    <div class="flex justify-between text-sm">
                        <span class="text-gray-600">直播优惠</span>
                        <span class="font-medium text-green-600">-¥900</span>
                    </div>
                    <div class="flex justify-between text-sm">
                        <span class="text-gray-600">优惠券</span>
                        <span class="font-medium text-green-600">-¥100</span>
                    </div>
                    <div class="flex justify-between text-sm">
                        <span class="text-gray-600">运费</span>
                        <span class="font-medium text-green-600">包邮</span>
                    </div>
                    <div class="flex justify-between text-sm">
                        <span class="text-gray-600">跨境电商综合税</span>
                        <span class="font-medium">¥611</span>
                    </div>
                    <div class="border-t border-gray-200 pt-2">
                        <div class="flex justify-between">
                            <span class="font-semibold text-gray-900">总计</span>
                            <span class="font-bold text-lg text-red-600">¥4,408</span>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 物流信息 -->
            <div class="mb-6">
                <h4 class="text-lg font-semibold text-gray-900 mb-4">物流信息</h4>
                <div class="bg-green-50 border border-green-200 rounded-lg p-4">
                    <div class="flex items-center space-x-3">
                        <i class="fas fa-shipping-fast text-green-500"></i>
                        <div>
                            <p class="font-medium text-green-900">预计发货时间</p>
                            <p class="text-sm text-green-700">2024年12月3日 - 2024年12月5日</p>
                        </div>
                    </div>
                    <div class="mt-3 text-sm text-green-700">
                        <p>• 现货商品将在1-2个工作日内发货</p>
                        <p>• 预售商品将在到货后第一时间发货</p>
                        <p>• 跨境商品需经过海关清关，预计7-15个工作日送达</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- 推荐商品 -->
        <div class="bg-white rounded-lg shadow-lg p-6 mt-8">
            <h3 class="text-xl font-bold text-gray-900 mb-6">为您推荐</h3>
            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
                <div class="product-card bg-gray-50 rounded-lg p-4 cursor-pointer hover:shadow-lg transition-shadow">
                    <img src="https://images.unsplash.com/photo-1556228578-8c89e6adf883?ixlib=rb-4.0.3&auto=format&fit=crop&w=200&q=80" alt="商品" class="w-full h-32 object-cover rounded-lg mb-3">
                    <h4 class="font-semibold text-gray-900 mb-1">海蓝之谜面霜</h4>
                    <p class="text-sm text-gray-600 mb-2">30ml 经典修复</p>
                    <div class="flex items-center justify-between">
                        <span class="text-lg font-bold text-red-600">¥1,899</span>
                        <span class="text-sm text-gray-500 line-through">¥2,299</span>
                    </div>
                </div>
                
                <div class="product-card bg-gray-50 rounded-lg p-4 cursor-pointer hover:shadow-lg transition-shadow">
                    <img src="https://images.unsplash.com/photo-1586495777744-4413f21062fa?ixlib=rb-4.0.3&auto=format&fit=crop&w=200&q=80" alt="商品" class="w-full h-32 object-cover rounded-lg mb-3">
                    <h4 class="font-semibold text-gray-900 mb-1">雅诗兰黛小棕瓶</h4>
                    <p class="text-sm text-gray-600 mb-2">50ml 抗老精华</p>
                    <div class="flex items-center justify-between">
                        <span class="text-lg font-bold text-red-600">¥999</span>
                        <span class="text-sm text-gray-500 line-through">¥1,299</span>
                    </div>
                </div>
                
                <div class="product-card bg-gray-50 rounded-lg p-4 cursor-pointer hover:shadow-lg transition-shadow">
                    <img src="https://images.unsplash.com/photo-1572635196237-14b3f281503f?ixlib=rb-4.0.3&auto=format&fit=crop&w=200&q=80" alt="商品" class="w-full h-32 object-cover rounded-lg mb-3">
                    <h4 class="font-semibold text-gray-900 mb-1">兰蔻小黑瓶</h4>
                    <p class="text-sm text-gray-600 mb-2">30ml 肌底精华</p>
                    <div class="flex items-center justify-between">
                        <span class="text-lg font-bold text-red-600">¥1,299</span>
                        <span class="text-sm text-gray-500 line-through">¥1,599</span>
                    </div>
                </div>
                
                <div class="product-card bg-gray-50 rounded-lg p-4 cursor-pointer hover:shadow-lg transition-shadow">
                    <img src="https://images.unsplash.com/photo-1556228578-8c89e6adf883?ixlib=rb-4.0.3&auto=format&fit=crop&w=200&q=80" alt="商品" class="w-full h-32 object-cover rounded-lg mb-3">
                    <h4 class="font-semibold text-gray-900 mb-1">娇兰复原蜜</h4>
                    <p class="text-sm text-gray-600 mb-2">50ml 修护精华</p>
                    <div class="flex items-center justify-between">
                        <span class="text-lg font-bold text-red-600">¥1,599</span>
                        <span class="text-sm text-gray-500 line-through">¥1,999</span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        // 主题切换功能
        const themeToggle = document.getElementById('theme-toggle');
        const body = document.body;
        
        // 检查系统主题偏好
        if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
            body.classList.add('dark-mode');
            themeToggle.innerHTML = '<i class="fas fa-sun text-xl"></i>';
        }
        
        themeToggle.addEventListener('click', () => {
            body.classList.toggle('dark-mode');
            if (body.classList.contains('dark-mode')) {
                themeToggle.innerHTML = '<i class="fas fa-sun text-xl"></i>';
            } else {
                themeToggle.innerHTML = '<i class="fas fa-moon text-xl"></i>';
            }
        });
        
        // 查看订单详情
        function viewOrderDetails() {
            const detailsSection = document.getElementById('order-details');
            detailsSection.classList.remove('hidden');
            detailsSection.scrollIntoView({ behavior: 'smooth' });
        }
        
        // 继续购物
        function continueShopping() {
            window.location.href = '../index.html';
        }
        
        // 添加商品点击事件
        document.querySelectorAll('.product-card').forEach(card => {
            card.addEventListener('click', () => {
                showNotification('商品已添加到购物车！');
            });
        });
        
        // 显示通知
        function showNotification(message) {
            const notification = document.createElement('div');
            notification.className = 'fixed top-20 right-4 bg-green-500 text-white px-6 py-3 rounded-lg shadow-lg z-50';
            notification.innerHTML = `
                <div class="flex items-center space-x-2">
                    <i class="fas fa-check-circle"></i>
                    <span>${message}</span>
                </div>
            `;
            document.body.appendChild(notification);
            
            setTimeout(() => {
                notification.remove();
            }, 3000);
        }
        
        // 模拟实时更新订单状态
        function updateOrderStatus() {
            // 这里可以添加实时更新订单状态的逻辑
            console.log('订单状态更新中...');
        }
        
        // 每30秒更新一次订单状态
        setInterval(updateOrderStatus, 30000);
    </script>
</body>
</html>